<template>
  <div class="tb">
    <ul>
      <!-- <li @click="this.$router.push({name:'sanpinglb', params:{ id:'clothing_more'}})">上衣</li>
      <li @click="this.$router.push({name:'sanpinglb', params:{ id:'skirt_more'}})">裙子</li>
      <li @click="this.$router.push({name:'sanpinglb', params:{ id:'trousers_more'}})">裤子</li>
      <li @click="this.$router.push({name:'sanpinglb', params:{ id:'shoes_more'}})">鞋子</li>
      <li @click="this.$router.push({name:'sanpinglb', params:{ id:'bags_more'}})">包包</li>
      <li @click="this.$router.push({name:'sanpinglb', params:{ id:'home_more'}})">家居</li> -->
      <!-- 编程式路由，传id值 -->
      <li v-for="(item,index) in categoryGoods" @click="this.$router.push({name:'sanpinglb', params:{ id:item.title}})" :key="index">
        {{ item.txt }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'mulutobu',
  data() {
    return {
      categoryGoods: [
        {
          txt:'上衣',
          title:'clothing_more',
          detail:'clothing_detail'
        },
        {
          txt:'裙子',
          title:'skirt_more',
          detail:'skirt_detail'
        },
        {
          txt:'裤子',
          title:'trousers_more',
          detail:'trousers_detail'
        },
        {
          txt:'鞋子',
          title:'shoes_more',
          detail:'shoes_detail'
        },
        {
          txt:'包包',
          title:'bags_more',
          detail:'bags_detail'
        },
        {
          txt:'家居',
          title:'home_more',
          detail:'home_detail'
        }
      ]     
    }
  },
  methods: {
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang = "less" scoped>

ul li {
  height: 38px;
  width: 16.7%;
  // margin:0 75px;
  display: block;
  float: left;
  line-height: 38px;
  text-align: center;
  transition: all 0.5s ease;
  cursor: pointer;
  box-sizing: border-box;
  color: white;
  font-size: 22px;
}

ul li:hover{
  background-color:#833910;
}

ul {
  background-color: #856437;
  box-sizing: border-box;
  border: 2px solid white;
  border-bottom: 0px;
  border-radius:5px;
  // padding:0 10px;
  overflow: hidden;
  display: flex;
  width:90.03%;
  position: fixed;
  top:100px;
  left:66.453px;
  z-index:1;
  margin: 0 auto;
}
</style>
